React是元件化思考，在專案資料夾下的src資料夾裡面的一個個js就是一個個元件，其中index.js是最大的父元件，它現在包著App這個子元件，並會渲染在html檔裡面的root這個標籤內

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

同一個資料夾裡面的app.js，這個就是現在畫面上那個會轉的React logo的code，你可以試試看更改這個js檔裡面的東西看看會發生什麼事

//app.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

那我們現在來試著做出一個元件吧，首先在src資料夾裡新增一個Welcome.js，輸入以下code，並放到index.js裡

//welcome.js
import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    );
  } 
}

export default Welcome;

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Welcome from './welcome.js';

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

有沒有看到Hello的字樣呢?